import { Space, Button } from "antd";
import { useState } from "react";
import { userLogoutApi } from "@/apis/user/user";
import { useNavigate } from "react-router-dom";

const Header = () => {
  const navigate = useNavigate();
  const [username, setUsername] = useState(localStorage.getItem("username"));
  const userLogout = () => {
    userLogoutApi().then((res) => {
      if (res.code !== 200) {
        // 退出失败
        alert(res.message);
        return;
      }
      localStorage.removeItem("username");
      setUsername("");
      localStorage.removeItem("token");
      navigate("/login");
    });
  };
  return (
    <div>
      <Space>
        <h3>Header</h3>
        <span>{username}</span>
        <Button size="small" type="default" onClick={userLogout}>
          退出
        </Button>
      </Space>
    </div>
  );
};

export default Header;
